<template>
    <el-dialog v-model="visible" :close-on-press-escape="false" :title="title" :width="width">
        <ul>
            <li class="sh">
                <span>公司名称：</span>
                <el-select v-model="companyId" clearable filterable @change="selectCompany" disabled>
                    <el-option v-for="(item) in companyOptions" :label="item.name" :value="item.id"/>
                </el-select>
            </li>
            <li class="sh">
                <span>部门：</span>
                <el-select v-model="search.deptId" filterable clearable @change="selectDept" placeholder="选择部门">
                    <el-option v-for="(item) in deptOptions" :label="item.deptName" :value="item.id"/>
                </el-select>
            </li>
        </ul>
<!--        <el-input placeholder="搜索"/>-->
        <el-table :data="empData" @row-dblclick="selectRow">
            <el-table-column prop="empName" label="姓名"/>
            <el-table-column prop="phone" label="联系电话"/>
            <el-table-column prop="position.name" label="岗位"/>
        </el-table>
        <template #footer>
            <el-button type="default" @click="visible=false">取消</el-button>
            <el-button type="default" @click="clearSelect">清除</el-button>
        </template>
    </el-dialog>
</template>

<script>

import {getCompanyOptions} from "../../../../network/sys/company";
import {getDeptOptions} from "../../../../network/sys/dept";
import {getEmpsByDeptId} from "../../../../network/emp";

export default {
    name: "EmpWindow",
    props:['width'],
    emits: ['clear-select','select-row'],
    data(){
        return{
            visible: false,
            title: '员工库',
            empData: [],
            companyOptions: [],
            deptOptions: [],
            companyId: 1,
            deptName: '',
            search:{
                deptId: 22
            }
        }
    },
    methods:{
        selectDept(){
          this.loadEmpData();
        },
        selectCompany(){
            this.loadDeptOptions();
        },
        selectRow(row, column, event){
            // console.log('row',row)
            // console.log('column',column)
            // console.log('event',event)
            this.$emit('select-row',this.$utils.clone(row))
            this.visible = false
        },
        clearSelect(){
            this.$emit('clear-select')
            this.visible = false
        },
        loadCompanyOptions(){
            getCompanyOptions().then(data=>{
                this.companyOptions = data.data;
            })
        },
        loadDeptOptions(){
            getDeptOptions(this.companyId).then(data=>{
                this.deptOptions = data.data;
            })
        },
        loadEmpData(){
            getEmpsByDeptId(this.search.deptId).then(data=>{
                this.$response.handle({
                    data: data,
                    log: '员工数据',
                    successFn: ()=>{
                        this.empData = data.data;
                    }
                })
            })
        },
        init(){
            this.loadEmpData();
            this.loadDeptOptions();
            this.loadCompanyOptions();
        }
    },
    created() {
        this.init();
    }
}
</script>

<style scoped>
.sh{
    display: flex;
}
.sh span{
    display: inline-block;
    line-height: 32px;
    width: 80px;
}
li{
    margin-right: 20px;
}
</style>